@tailwind base;
@tailwind components;
@tailwind utilities;

/* 引入 KaTeX 样式 */
@import "katex/dist/katex.min.css";
/* 引入 Prism 代码高亮样式 */
@import "prismjs/themes/prism.min.css";

/* 自定义样式 */
body {
  @apply bg-gray-50 text-gray-800 min-h-screen flex flex-col;
}

.navbar {
  @apply bg-primary text-white shadow-md;
}

.container {
  @apply max-w-6xl mx-auto px-4 py-8 flex-grow;
}

.section {
  @apply mb-12;
}

h1 {
  @apply text-3xl font-bold mb-6 text-primary;
}

h2 {
  @apply text-2xl font-semibold mb-4 text-primary;
}

.card {
  @apply bg-white rounded-lg shadow-md p-6 mb-6;
}

.tooltip {
  @apply absolute bg-gray-800 text-white text-sm px-2 py-1 rounded pointer-events-none opacity-0 transition-opacity duration-200;
}

/* 音频对比表格样式 */
.audio-comparison-table {
  @apply shadow-sm rounded-lg overflow-hidden;
}

.audio-comparison-table table {
  @apply w-full border-collapse;
}

.audio-comparison-table th {
  @apply bg-gray-50 border-b border-gray-200 px-4 py-3 text-sm font-medium text-gray-700;
}

.audio-comparison-table td {
  @apply border-b border-gray-200 px-4 py-3 text-sm;
}

.audio-comparison-table tr:hover {
  @apply bg-gray-50;
}

/* 音频播放器样式 */
.audio-player {
  @apply flex flex-col items-center space-y-2;
}

.audio-controls {
  @apply flex items-center space-x-2;
}

.audio-play-btn {
  @apply w-8 h-8 rounded-full bg-blue-500 hover:bg-blue-600 text-white 
         flex items-center justify-center transition-all duration-200 
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
         shadow-sm hover:shadow-md;
}

.audio-play-btn:hover {
  @apply transform scale-105;
}

.audio-play-btn.playing {
  @apply bg-green-500 hover:bg-green-600;
}

.audio-play-btn.playing .play-icon {
  @apply hidden;
}

.audio-play-btn.playing::after {
  content: "⏸";
  @apply text-white text-sm;
}

.play-icon {
  @apply text-white text-xs;
}

/* 静音按钮样式 */
.audio-mute-btn {
  @apply w-6 h-6 rounded-full bg-gray-500 hover:bg-gray-600 text-white 
         flex items-center justify-center transition-all duration-200 
         focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2
         shadow-sm hover:shadow-md;
}

.audio-mute-btn:hover {
  @apply transform scale-105;
}

.audio-mute-btn.muted {
  @apply bg-red-500 hover:bg-red-600;
}

.audio-mute-btn.muted .mute-icon {
  @apply hidden;
}

.audio-mute-btn.muted::after {
  content: "🔇";
  @apply text-white text-xs;
}

.mute-icon {
  @apply text-white text-xs;
}

/* 时间显示样式 */
.audio-time-display {
  @apply text-xs text-gray-600 text-center;
}

.audio-time-display .current-time {
  @apply text-gray-800 font-medium;
}

.audio-time-display .total-time {
  @apply text-gray-500;
}

/* 表格响应式设计 */
@media (max-width: 1024px) {
  .audio-comparison-table {
    @apply text-xs;
  }
  
  .audio-comparison-table th,
  .audio-comparison-table td {
    @apply px-2 py-2;
  }
}

@media (max-width: 768px) {
  .audio-comparison-table {
    @apply text-xs;
  }
  
  .audio-comparison-table th,
  .audio-comparison-table td {
    @apply px-1 py-1;
  }
  
  .audio-controls {
    @apply space-x-1;
  }
  
  .audio-play-btn {
    @apply w-6 h-6;
  }
  
  .audio-mute-btn {
    @apply w-5 h-5;
  }
  
  .play-icon,
  .mute-icon {
    @apply text-xs;
  }
  
  .audio-time-display {
    @apply text-xs;
  }
}

/* 播放状态指示器 */
.audio-play-btn[data-playing="true"] {
  @apply bg-green-500 hover:bg-green-600;
}

.audio-play-btn[data-playing="true"] .play-icon {
  @apply hidden;
}

.audio-play-btn[data-playing="true"]::after {
  content: "⏸";
  @apply text-white text-sm;
}

/* 加载状态 */
.audio-play-btn.loading {
  @apply bg-gray-400 cursor-not-allowed;
}

.audio-play-btn.loading .play-icon {
  @apply hidden;
}

.audio-play-btn.loading::after {
  content: "⟳";
  @apply text-white text-sm animate-spin;
}

